<template>
  <!-- 登录页面 -->
  <div class="login-body">
    <div class="login-container">
      <el-form
        :model="loginForm"
        ref="loginForm"
        :rules="loginRules"
        class="login-form"
        label-position="left"
      >
        <h2>登录</h2>

        <el-form-item prop="username">
          <el-input
            ref="username"
            placeholder="请输入用户名"
            type="text"
            name="username"
            v-model="loginForm.username"
            tabindex="1"
            prefix-icon="el-icon-user-solid"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            ref="password"
            placeholder="请输入密码"
            :type="passwordType"
            :key="passwordType"
            v-model="loginForm.password"
            name="password"
            tabindex="2"
            @keyup.enter.native="handleLogin"
            prefix-icon="el-icon-s-goods"
          />
          <span class="show-pwd" @click="showPwd">
            <i
              slot="suffix"
              clsss=""
              :class="
                passwordType == 'password'
                  ? 'iconfont icon-biyanjing'
                  : 'iconfont icon-yanjing'
              "
            ></i>
          </span>
        </el-form-item>

        <el-button
          :loading="loading"
          type="primary"
          style="width: 100%; margin-bottom: 30px"
          @click.native.prevent="handleLogin"
        >
          登录
        </el-button>

        <div class="tips">
          <span style="margin-right: 20px">用户名:管理员/访客</span>
          <span>密码:任意密码都可</span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import "../assets/icon/iconfont.css";
import { validUsername } from "@/utils/validate";
export default {
  name: "Login",
  components: {},
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入用户名"));
      }
      if (!validUsername(value)) {
        callback(new Error("请输入正确的用户名"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("用户密码不得少于6位"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "", //用户名
        password: "", //密码
      },
      loading: false,
      passwordType: "password",
      loginRules: {
        username: [
          {
            require: true,
            trigger: "blur",
            validator: validateUsername,//用户名验证
          },
        ],
        password: [
          {
            require: true,
            trigger: "blur",
            validator: validatePassword,//用户密码验证
          },
        ],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 登录按钮
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (!valid) return;
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("登录失败");
          return false;
        }
      });
    },
    showPwd() {
      if (this.passwordType == "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
  },
};
</script>
